<template>
  <custom-navbar title="分类"></custom-navbar>
  <view class="df container">
    <!-- 左侧滚动视图区域 -->
    <scroll-view
      class="left"
      scroll-y="true"
      :style="{ height: windowHeight + 'px' }"
    >
      <view
        class="item"
        :class="{ active: categoryValue === item.id }"
        v-for="item in categoryList"
        :key="item.id"
        @click="handleCategory(item.id)"
        >{{ item.name }}</view
      >
    </scroll-view>
    <!-- 右侧的滚动视图区域 -->
    <scroll-view
      class="right"
      scroll-y="true"
      :style="{ height: windowHeight + 'px' }"
    >
      <goods-list-line-item :goodsList="goodsList" class="padding-default" />
    </scroll-view>
    <custom-tabbar :index="1" />
  </view>
</template>
<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { goodsListApi } from "@/api/index.js";

onLoad(() => {
  getGoodsList();
});

const sysInfo = uni.getSystemInfoSync();
const windowHeight = ref(sysInfo.windowHeight);

const categoryValue = ref(2);
const categoryList = ref([
  { name: "淘宝", id: 2 },
  { name: "拼多多", id: 3 },
  { name: "京东", id: 4 },
  { name: "小红书", id: 5 },
  { name: "抖音", id: 6 },
  { name: "快手", id: 7 },
  { name: "微信视频号", id: 8 },
]);

const handleCategory = (id) => {
  categoryValue.value = id;
  getGoodsList();
};

// 商品列表
const goodsList = ref([]);
const getGoodsList = async () => {
  const params = {
    currentPage: 1,
    pageSize: 10,
    source: categoryValue.value,
  };
  const res = await goodsListApi(params);
  goodsList.value = res.records;
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  .left {
    background-color: #f0f0f0;
    flex-shrink: 0;
    width: 200rpx;
    height: 100%;
    .item {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      position: relative;
      &.active {
        color: $theme;
        background-color: #fff;
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          height: 40rpx;
          width: 8rpx;
          background-color: #fa436a;
          border-radius: 0 8rpx 8rpx 0;
          opacity: 0.8;
        }
      }
    }
  }
  .right {
    flex: 1;
    overflow: hidden;
  }
}
</style>
